<template>
	<view class="billPre p10">
		<view class="step-box mb10 p16 bgff r2">
			<view class="flex flexS">
				<view class="left-box">
					<image class="icon" src="/static/img/icon/fa.png" mode="aspectFill"></image>
					<text class="lin"></text>
				</view>
				<view class="right-box">
					<view class="address">麓谷企业广场E区-4栋</view>
					<view class="phone">187 7313 9959</view>
				</view>
			</view>
			<view class="flex flexS">
				<view class="left-box">
					<image class="icon" src="/static/img/icon/sort.png" mode="aspectFill"></image>
					<text class="lin"></text>
				</view>
			</view>
			<view class="flex flexS">
				<view class="left-box">
					<image class="icon" src="/static/img/icon/shou.png" mode="aspectFill"></image>
				</view>
				<view class="right-box">
					<view class="address">麓谷企业广场E区-4栋</view>
					<view class="phone">187 7313 9959</view>
				</view>
			</view>
		</view>
		<view class="list">
			<view v-for="(item,index) in 5" :key="index" class="item-box bgff mb12 p10 r2 flex flexC">
				<image class="cover r4" src="/static/logo.jpg" mode="aspectFill"></image>
				<view class="flex1 pl12 fs14">
					<view class="bold6">达达经济</view>
					<view class="">距离：665米</view>
				</view>
				<view class="mr20">约 <text class="price fs24 bold6">￥6.5</text>元</view>
				<image v-if="true" class="icon" src="/static/img/icon/sel.png" mode="aspectFill"></image>
				<image v-else class="icon" src="/static/img/icon/nor.png" mode="aspectFill"></image>
			</view>
		</view>
		
		<view class="btn-box flex flexC cff fs11">
			<view class="left-box aliC">
				<view class="fs13">
					<text>预估</text>
					<text class="fs20 bold6">7.8-10.8</text>
					<text>元起</text>
				</view>
				<view class="">已选20个车型，最高优惠3.3元</view>
			</view>
			<view class="right-box flex flexC flexJC fs14">立即呼叫</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				
			};
		}
	}
</script>

<style lang="scss" scoped>
.billPre {
	background-color: #F6F6F6;
	height: 100vh;
	box-sizing: border-box;
	.list {
		padding-bottom: 180rpx;
		background-color: #F6F6F6;
	}
	.btn-box {
		border-radius: 80rpx;
		width: 636rpx;
		overflow: hidden;
		position: fixed;
		bottom: 80rpx;
		left: calc(50% - 318rpx);
		.left-box {
			height: 100rpx;
			width: 408rpx;
			background-color: #FD449B;
		}
		.right-box {
			height: 100rpx;
			width: 228rpx;
			background-color: #FE8AC1;
		}
	}
	.item-box {
		.cover {
			width: 96rpx;
			height: 96rpx;
		}
		.icon {
			width: 56rpx;
			height: 56rpx;
		}
		.price {
			color: #FF3C3C;
		}
	}
	.step-box {
		.left-box {
			display: flex;
			align-items: center;
			flex-direction: column;
			justify-content: center;
			margin-right: 20rpx;
			.icon {width: 38rpx;height: 38rpx;}
			.lin {
				margin: 6rpx 0;
				display: block;
				height: 40rpx;
				width: 2rpx;
				border-left: 2rpx dashed #707070;
			}
		}
		.right-box {
			color: #000;
			position: relative;
			margin-top: -4rpx;
			.address {
				font-size: 32rpx;
				font-weight: 600;
			}
			.phone {
				font-size: 26rpx;
				margin-top: 6rpx;
			}
		}
	}
}
</style>
